<template>
  <div class="training-list" v-if="TrainingData && TrainingData.length > 0">
    <template
      v-for="(trainingItem, trainingItemIndex) in TrainingData"
      :key="trainingItemIndex"
    >
      <!-- 课程分数 -->
      <CourseGrade
        v-if="trainingItem.course_training_type_id == '1'"
        :course_id="course_id"
        :course_ku_id="course_ku_id"
      />
      <!-- 编辑器 -->
      <TrainingBox
        v-if="trainingItem.course_training_type_id == '2'"
        :title="trainingItem.title"
      >
        <div class="raw-html" v-html="trainingItem.content"></div>
      </TrainingBox>
      <!-- 文件下载 -->
      <TrainingBox
        v-if="trainingItem.course_training_type_id == '3'"
        :title="trainingItem.title"
      >
        <FileDownload :data="getDownloadData(trainingItem)" />
      </TrainingBox>
      <!-- 证书上传 -->
      <TrainingBox
        v-if="trainingItem.course_training_type_id == '4'"
        :title="trainingItem.title"
      >
        <CertDownload :course_id="course_id" />
      </TrainingBox>
      <div
        class="divider-line"
        v-if="trainingItemIndex != TrainingData.length - 1"
      ></div>
    </template>
  </div>
  <NoData v-else />
</template>

<script setup lang="ts">
import { nextTick, ref, watch } from "vue";
import type { CourseTrainingListItem } from "../../../../../types/aviation";
import { postTrainingList } from "../../../../../api/aviation";
import TrainingBox from "./TrainingBox.vue";
// training list items
import CourseGrade from "./TrainingList_Item/CourseGrade.vue";
import FileDownload from "./TrainingList_Item/FileDownload.vue";
import CertDownload from "./TrainingList_Item/CertDownload.vue";

type Props = {
  progress_id: string | number;
  course_id: string | number;
  course_ku_id: string | number;
};

const props = defineProps<Props>();

const TrainingData = ref<CourseTrainingListItem[]>();
const getExamContentData = async () => {
  let course_id = props.course_id;
  let progress_id = props.progress_id;
  let res = await postTrainingList(progress_id as number, course_id as number);
  if (res.code == 200) {
    TrainingData.value = res.data || [];
  }
};

const getDownloadData = (item: CourseTrainingListItem) => {
  let file_url_splits = item.file_url.split("/");
  let name = file_url_splits[file_url_splits.length - 1];
  let type = item.file_url_type;
  let url = item.file_url;
  return {
    name,
    url,
    type,
  };
};

watch(
  [() => props.course_id, () => props.progress_id],
  (newValue) => {
    if (newValue[0]) {
      TrainingData.value = [];
    }
    if (newValue[0] && newValue[1]) {
      getExamContentData();
    }
  },
  { immediate: true }
);
</script>

<style lang="less">
.training-list .divider-line {
  margin: 24px 0;
}
@media screen and (max-width: 768px) {
  .training-list .divider-line {
    margin: 123px 0;
  }
}
</style>
<style scoped lang="less">
.training-list {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid #ccd6de;
  border-radius: 16px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .training-list {
    margin-top: 123px;
    padding: 82px;
    border-radius: 82px;
  }
}
</style>
